<template>
	<div class="">
		<!-- 大轮播图 -->
		<el-carousel :interval="5000" arrow="always" height="460px">
			<el-carousel-item v-for="(item, index) in NoteImg" :key="index">
				<img style="width: 100%; height: 100%" :src="item.coverImg" />
			</el-carousel-item>
		</el-carousel>
		<!-- end -->
		<div class="info">
			<!-- 通知公告 -->
			<div class="INleft">
				<!-- 标题 -->
				<div class="title">
					<div class="ads">通知公告 | <span class="notice">Notice</span></div>
					<div class="more">
						<!-- 更多 -->
					</div>
				</div>
				<!-- end -->
				<!-- 通知内容标题 -->
				<div class="myNotice">
					<div class="inNo" v-for="(iten, index) in TongZhilist.slice(0, 5)" :key="index"
						@click="tuchNoticeInfo(iten,index)">
						<!-- 日期部分 -->
						<div class="days">
							<div class="myDay">22</div>
							<div class="" style="border-bottom: solid 1px white; margin-top: 6px"></div>
							<div class="note">2021-10</div>
						</div>
						<!-- end -->
						<!-- 通知标题部分 -->
						<div class="noticeInf">
							<div class="schoolN">【{{ iten.title }}】</div>
							<div class="thenInfo" v-html="richTextFormat(iten.content)">
							</div>
						</div>
						<!-- end -->
					</div>
				</div>
				<!-- end -->
			</div>
			<!-- end -->

			<!-- 轮播图 -->
			<div class="INright">
				<!-- 标题 -->
				<div class="title">
					<div class="ads">
						<!-- 通知公告 | <span class="notice">Notice</span> -->
					</div>
					<div class="more" @click="tuchNotice">更多</div>
				</div>
				<div class="block">
					<el-carousel height="460px" indicator-position="none">
						<el-carousel-item v-for="(item, index) in carouselItme" :key="index">
							<div class="" @click="openInfo(item)" style="cursor: pointer;">
								<img class="runHourse" :src="item.coverImg" />
								<div class="miniTitle">
									<div class="INMIN" style="width: 90%">
										{{item.title}}
									</div>
								</div>
							</div>

						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
			<!-- end -->
		</div>
		<!-- 考核规则 -->
		<div class="">
			<div class="examIn">考核规则</div>
			<!-- 规则内容 -->
			<div class="theninformation">
				<!-- 内容标题 -->
				<div class="inImage">
					<div class="infoTitle">
						<span style="color: #0f57a6">网络教学</span>
						<span style="color: red">综合评价</span>
					</div>
					<div class="thenEng">COMPREHENSIVE EVALUATION OF TEACHING</div>
					<div class="add">
						<img :src="contentInfoConfig.assess_img" />
						<!-- <img src="../assets/pic_19.png" />
            <img src="../assets/pic_20.png" />
            <img src="../assets/pic_21.png" />
            <img src="../assets/pic_20.png" /> -->
					</div>
				</div>
				<!-- end -->
			</div>
			<!-- end -->
		</div>
		<!-- 课程学习 -->
		<div class="study">
			<div class="inStudy">
				<div class="tegImg">
					<img src="../assets/pic_23.png" />
				</div>
				<div class="hand">
					<img :src="contentInfoConfig.course_img" />
					<!-- <img :src="PCConfiguration.course_img"> -->
				</div>
			</div>
		</div>
		<!-- end -->

		<!-- end -->
		<!-- 自学考试 -->
		<div class="exam">
			<div class="inExam">
				<div class="inSchool">
					<div class="">
						<div class="inBag"></div>
						<div class="thenSchool">
							<!-- 贵州工程应用技术学院高等教育自学考试 -->
							{{ PCConfiguration.title }}
						</div>
					</div>
					<!-- 学校简介 -->
					<div class="since" v-html="richText(PCConfiguration.content)"></div>
					<!-- <div class="since">
						西南大学自考始于1990年，是重庆市教育考试院批准的主考学校之一。学校自考主考专业有：汉语言文学、学前教育、会计学、工商管理、人力资源管理、教育学、网络工程、动物医学、金融学、土木工程、园林等11个本科专业，及汉语言文学专科专业。
					</div> -->
					<!-- end -->
					<!-- 查看全部 -->
					<div @click="toPage" class="moreLook">
						<span>查看全部 <i class="el-icon-arrow-right"></i></span>
					</div>
					<!-- end -->
				</div>
			</div>
		</div>
		<!-- end -->

		<!-- 专业部分 -->
		<div class="news">
			<div class="MyNews">
				<!-- 标题部分 -->
				<div class="ads">开设专业 | <span class="notice">Major</span></div>
				<!-- ed -->
				<!-- 新闻内容部分 -->
				<div class="myInfoOfNews">
					<el-carousel trigger="click" :interval="4000" type="card" height="380px">
						<el-carousel-item class="inSwiper" v-for="(item, index) in MajorInfo" :key="index">
							<div class="newsInf">
								<div id="newsInf" class="newsFF">
									<!-- 新闻图片 -->
									<img :src="item.coverImg" />
									<!-- end -->
								</div>
								<div class="MyNewsIn">
									<div class="myInfo">
										<!-- 新闻内容标题 -->
										<div class="nowsT">{{ item.title }}</div>
										<!-- end -->
									</div>
									<!-- 部分内容 -->
									<div class="thenInfoNews">
										<div class="majotMin" v-html="richTextFormat(item.content)">
										</div>
									</div>
									<!-- end -->
									<div id="right" class="myDate" @click="openmajor(item)">
										<span style="margin-left: 4px">查看</span>
										<span style="font-size: 20px;font-weight: bold;margin-top: 2px;"><i class="el-icon-arrow-right"></i></span>
									</div>
								</div>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
				<!-- end -->
			</div>
		</div>
		<!-- end -->
	</div>
</template>

<script>
	import {
		getMajorInfo
	} from "@/service/content";
	import {
		mapState
	} from "vuex";
	export default {
		name: "Content",
		data() {
			return {
				carouselItme: [], //轮播图
				TongZhilist: [],
				Inform: [], //通知、政策
				PCConfiguration: [], //学校信息
				NoteImg: [],
				MajorInfo: [],
				infoConfig: [],
			};
		},
		methods: {
			openmajor(item){
				console.log(item);
				sessionStorage.setItem('MajorItems', JSON.stringify(item))
				this.$router.push("major");
			},

			openInfo(item) {
				sessionStorage.setItem('TongZhiItems', JSON.stringify(item))
				this.$router.push("informMsg");
			},

			toPage: function() {
				this.$router.push('introductions')
			},

			richText: function(str) {
				if (!str) return '';
				return str.replace(/<[^<>]+>/g, '').replace(/&nbsp;/ig, '').slice(0, 200) + '...';
			},
			//富文本过滤
			richTextFormat(value = '', len = 32) {
				value = value.replace(/<\[^>]*>/g, '')
				value = value.replace(/<\.+?>/g, '');
				value = value.replace(/\s+/g, '');
				if (value.length > 30) {
					return value.slice(0, len) + "...";
				}
				return value;
			},

			tuchNotice() {
				this.$router.push("informs");
				// console.log(111);
			},
			tuchNoticeInfo(iten, index) {
				sessionStorage.setItem('TongZhiItems', JSON.stringify(iten))
				this.$router.push("informMsg");
			},

			getInfo() {
				//学校信息数据请求
				this.$axios
					.post("https://vvv.52ecode.cn/api/pc.SchoolDescController/index", {
						website_id: 1,
					})
					.then((res) => {
						this.PCConfiguration = res.data.data[0];
						// console.log(this.PCConfiguration)
					})
					.catch((err) => {
						console.log(err);
						// this.getInfo();
					});

				//通知数据请求
				this.$axios.post('https://vvv.52ecode.cn/api/pc.NoticeController/index', {
						website_id: 1
					})
					.then((res) => {
						this.TongZhilist = [];

						this.$store.state.Zhengche = [];

						this.$store.state.Tongzhi = [];

						this.$store.state.News = [];

						this.Inform = res.data.data;

						this.Inform.forEach((item, index) => {
							if (item.type == "政策支持") {
								this.$store.commit("setZhengcheData", item);
							} else if (item.type == "通知公告") {
								this.$store.commit("setTongzhiData", item);
								this.TongZhilist.push(item);
								if (item.isSlideshow == true) {
									this.carouselItme.push(item)
								}
							} else if (item.type == "新闻通知") {
								this.$store.commit("setNewsData", item);
								this.NoteImg.push(item)
							}
						});
					})
					.catch((err) => {
						console.log(err);
						// this.getInfo();
					});
			},

			async getMajorInfo() {
				const res = await getMajorInfo();
				this.MajorInfo = res.data;
			},
		},
		computed: {
			...mapState(["contentInfoConfig"]),
		},
		created() {
			this.getInfo();
			this.getMajorInfo();
		},
	};
</script>

<style>
	#right:hover {
		color: #0083e8;
		transform: translateX(2%);
		/* 　transition:width2s; */
		transition: all 0.3s;
	}

	#right {
		transition: all 0.3s;
	}

	.majotMin {
		width: 97%;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.INMIN {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.miniTitle {
		position: relative;
		background-color: #00000080;
		color: #ffffff;
		top: -15%;
		height: 15%;
		font-size: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #ffffff;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #ffffff;
	}

	.inExam {
		margin-left: 63%;
		transform: translateX(-50%);
		display: flex;
		justify-content: flex-end;
		width: 1200px;
	}

	.hand {
		width: 1200px;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.hand img {
		/* border: saddlebrown solid 1px; */
		width: 100%;
	}

	.study {
		padding: 40px 0;
	}

	.tegImg {
		text-align: center;
	}

	.inStudy {
		width: 80%;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.add {
		margin-top: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		/* padding: 0 100px; */
	}

	.inImage {
		padding: 0 32px;
	}

	.thenEng {
		margin-top: 4px;
		color: #adadad;
	}

	.infoTitle {
		font-size: 20px;
		font-family: STSong;
		font-weight: bold;
	}

	.theninformation {
		margin-top: -160px;
		background-color: #ffffff;
		/* margin-bottom: 60px; */
		width: 1200px;
		margin-left: 50%;
		transform: translateX(-50%);
		padding: 30px 0;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	.examIn {
		width: 100%;
		background-image: url(../assets/pic_16.png);
		color: #ffffff;
		letter-spacing: 1pt;
		text-align: center;
		padding: 40px 0 220px;
		/* padding: 20px 0; */
		font-size: 40px;
	}

	.moreLook {
		margin-top: 20px;
		color: #4aa9fb;
		background-color: #ffffff;
		width: 120px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 0;
		border-radius: 30px;
		cursor: pointer;
	}

	.moreLook:hover {
		background-color: #c2d9f1;
	}

	.inBag {
		margin-top: 30px;
		padding: 10px;
		width: 300px;
		height: 10px;
		border-radius: 20px;
		background-image: linear-gradient(to right,
				#2aa9f9,
				#298bf8,
				#286bf7,
				#2866f7);
	}

	.since {
		/* margin-top: 20px; */
		line-height: 1.5;
		font-size: 18px;
	}

	.thenSchool {
		font-size: 30px;
		position: relative;
		top: -40px;
	}

	.exam {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.inSchool {
		margin-top: 40px;
		/* width: 550px; */
		color: #ffffff;
	}

	.exam {
		width: 100%;
		background-image: url(../assets/page-index-03.png);
		background-size: 100% 100%;
		padding: 20px 0;
		padding-bottom: 100px;
	}

	.block {
		margin-top: 20px;
	}

	.runHourse {
		width: 100%;
		height: 100%;
	}

	.myDate {
		margin-right: 16px;
		padding: 16px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #757779;
	}

	.MyNewsIn {
		padding: 10px;
	}

	.thenInfoNews {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.5;
		overflow: hidden;
		color: grey;
	}

	.nowsT {
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.5;
		overflow: hidden;
		font-size: 17px;
	}

	.nowsT:hover {
		color: #0083e8;
	}

	.myInfo {
		width: 100%;
		padding: 10px;
	}

	.myInfoOfNews {
		width: 100%;
		cursor: pointer;
		display: grid;
		/* grid-template-columns: repeat(4, 1fr); */
		grid-gap: 24px;
	}

	.newsInf {
		height: 100%;
		background-color: #ffffff;
		/* border: #000000 solid 1px; */
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	#newsInf {
		width: 100%;
		height: 220px;
		overflow: hidden;
	}

	#newsInf {
		transition: all 0.6s;
		cursor: pointer;
	}

	.newsInf:hover {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	#newsInf img:hover {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
		transform: scale(1.4);
		transition: all 0.6s;
	}

	#newsInf img {
		transition: all 0.6s;
	}

	.inSwiper {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	.newsFF {
		overflow: hidden;
		background-color: #ffffff;
		width: 100%;
		height: 100px;
	}

	.newsFF img {
		width: 100%;
		height: 220px;
		overflow: hidden;
	}

	.news {}

	.MyNews {
		width: 1200px;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.news {
		width: 100%;
		padding: 60px 0;
		background-image: url(../assets/kbbg.jpg);
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #ffffff;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #ffffff;
	}

	.thenInfo {
		margin-top: 8px;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.schoolN {
		color: #0083e8;
		font-weight: bold;
		font-size: 17px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.note {
		margin-top: 10px;
		text-align: center;
		color: #ffffff;
		font-size: 16px;
	}

	.myDay {
		text-align: center;
		color: #ffffff;
		font-size: 20px;
		letter-spacing: 1.5pt;
	}

	.inNo {
		margin-bottom: 16px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.noticeInf {
		background-color: #fbf1ef;
		padding: 16px 10px;
		width: 80%;
	}

	.days {
		background-color: #0083e8;
		padding: 10px 16px;
		width: 16%;
	}

	.myNotice {
		cursor: pointer;
		margin-top: 20px;
	}

	.more {
		color: #909aa2;
		cursor: pointer;
		letter-spacing: 1pt;
		font-size: 18px;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.notice {
		color: #c4c2cf;
	}

	.ads {
		cursor: pointer;
		color: #0083e8;
		font-weight: bold;
		font-size: 20px;
	}

	.info {
		margin-left: 50%;
		transform: translateX(-50%);
		width: 1200px;
		padding: 20px 0;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
	}

	.INleft {
		width: 590px;
	}

	.INright {
		width: 590px;
	}
</style>
